嗨 ! 大家好，我是阿蘇
又來到了Day 5，今天來談談比較輕鬆的主題
那就是如何蒐集 Side Project 相關素材，
像是圖庫來源、Icon來源、參考網站、版型，是不是覺得自己沒有美感，覺得做出來醜不拉基，快來多看看這些給自己靈感，讓自己的專題更好看、精緻，讓別人眼前一亮!
在Day3 有分享一些我常用的參考網站，今天來做更詳細的介紹啦，有興趣的也可以看DAY3 最下面的網站分享，也跟今天主題有關喔!
讓我們正式進入正題吧!
選定你的專題風格再決定你的專題配色
其實設計也是一門很深的學問，但是對開發者來說不見得會擅長這塊，所以會造成 side Project 呈現不如預期，雖然內容很豐富但是不夠亮眼，所以這邊分享一點基礎風格跟配色心得給大家，雖然我們不擅長設計，但是至少讓我們的作品呈現完整。
首先，你可以想想 你想要甚麼樣的風格 ?
浪漫風、文藝風、家居風、自然風、科技風... 等風格
是不是有點沒概念，這邊舉幾個簡單例子給大家:
我想做一個金飾店的專題，那我的風格可能就是高貴、金錢、質感風
我想做一個藝品展覽專題，那我的風格可能就是藝術風
我想做一個居家家居專題，那我的風格可能就是溫馨、居家風
也可以參考一些網站範本去尋找你的主題，並挑選合適的風格及配色
是不是有點基礎概念了呢? 從想做的網站去聯想合適的風格，這時候心中就會開始慢慢有畫面，然後我們就可以開始進到下一步思考如何配色了。
下一步，專題風格延伸你的專題配色 思考如何配色
我完全不懂設計、也沒有美感
這邊先不跟大家談深入設計，只是給大家一個基本配色概念，那我們在製作專題時有個基礎知識，在蒐集參考資料是也會更了解如何選擇適合專題的色系。
一個網站配色應該要有主色、副色、強調/提示色以這三個為核心進行配色，也要考慮顏色是不是有互相衝突，如果真的不會配色也沒有概念也沒關係，可以去參考那些網站配色，在當切入點尋找合適的顏色。
主色 - 品牌顏色 (用最多的顏色)
複色 - 搭配主色點綴、輔助色
強調/提示色 - 提示文字、重要訊息
bestwebsite ★★★★
多頁的網頁版型、風格、配色參考 (偏歐美)
awwwards ★★★
有簡體中文、網頁版型、設計參考
設計風格的參考網站，裡面有很多設計感十足的作品參考，不過有些設計風格對開發專題相對難度太高
siteinspire ★★★★
網站參考、配色、風格參考、Demo展示
這個網站比較特別的是他有完整的Demo展示，你可以看到更多元化的網站，也可以對你的專題更有靈感
webdesignclip ★★★★★
日系風格、完整的網頁Demo展示、配色、風格參考
因為我本身很喜歡日系、簡約風，所以很喜歡這個網站，這是我最常用的參考網站，可以篩選自己喜歡的色系，也有完整的Demo展示
高解析度精緻的圖片會讓專題質感更好，我們也可以使用網路的免費圖庫來使用，以下分享常用免費圖庫網
使用方法:
安裝CDN (初期建議使用) 、進階可以用npm 進行安裝使用
將 link貼在 
選取icon
Copy貼上
使用方法:
安裝CDN (初期建議使用) 、進階可以用npm 進行安裝使用
將 link貼在 
選取icon copy貼上html即可
是不是很簡單呢 ! 快來使用看看吧 !
分享了這麼多資料，但是網路上其實也有更多的資料可以查詢，分享的不見得適合每個人，大家也可以記關鍵的重點文字，善用 Google 搜尋資料，希望能幫助到大家給大家一點方向跟概念，今天就分享到這邊 ，下台一鞠躬 !
iThome鐵人賽
看影片追技術